<template>

  <!-- 轮播图 -->
  <mt-swipe :auto="4000">
    <!-- 遍历生成轮播图 -->
    <mt-swipe-item v-for="(item, i) in slides" :key="i">
      <img :class="[isFull ? 'img-full' : 'img-adaptive']" :src="item[attr]" alt="">
    </mt-swipe-item>
  </mt-swipe>

</template>

<script>
export default {
  data(){
    return {}
  },
  /** 轮播图的封装组件, 通过传递参数来获取所需要的轮播图效果 **/
  props: ['slides', 'attr', 'isFull']
}
</script>

<style lang="scss" scoped>
  .mint-swipe{
    height: 180px;
    text-align: center;
    overflow: hidden;
    // 撑满屏幕的样式
    .img-full {
      width: 100%;
      height: 100%;
    }
    // 自适应的样式
    .img-adaptive {
      height: 100%;
    }
    /* 修改轮播图图片的背景(未渲染图片时才会显示) */
    .mint-swipe-item{
      /* scss进行元素选择 */
      //&:nth-child(1){
      //  background-color: red;
      //}
      //&:nth-child(2){
      //  background-color: hotpink;
      //}
      //&:nth-child(3){
      //  background-color: pink;
      //}
    }

  }
</style>